<template>
  <view class="container" :style="'padding-top: '+menuInfo.contentTop+';'">
    <view :style="closeStyle" class="close" @click="colse">
      <uni-icons size="30" color="#fff" type="closeempty"></uni-icons>
    </view>
    <view class="video-list">
      <view class="yuan" v-if="videoIndex===0">
        <view class="yuan-box">
          <cmd-progress type="circle" :stroke-width="15" :width="96" stroke-shape="square"
                        :percent="percent" stroke-color="red"></cmd-progress>
          <view class="videoTime" v-if="videoTime!==0">{{ videoTime }}</view>
        </view>
        <view class="yuan-msg">等待奖励获得</view>
      </view>
      <view v-if="videoIndex===index" class="video-item" v-for="(item,index) in videoList">
        <video class="video" autoplay object-fit="cover" :controls="false" :show-center-play-btn="false"
               :enable-progress-gesture="false"
               :src="item.videoAddress"
               @timeupdate="videoTimeupdate" @ended="videoEnded"></video>
      </view>
    </view>
    <!--    抽奖积分到账弹框-->
    <pop1 :integral="integral" ref="pop1" @confirm="confirm"></pop1>
    <!--    领取福袋弹框-->
    <pop2 @successMp3="successMp3" :integral="integral" ref="pop2" @confirm="confirm"></pop2>
  </view>
</template>
<script>
import pop1 from "@/large/components/pop1.vue"
import pop2 from "@/large/components/pop2.vue"

export default {
  components: {pop1, pop2},
  data() {
    return {
      imageUrl: 'https://wechat-pictures-1301970825.file.myqcloud.com/wxapp',
      menuInfo: uni.getStorageSync("menuInfo"),
      closeStyle: '',
      videoList: [],
      videoIndex: 0,
      percent: 0,
      videoTime: '',
      integral: "",
      productType: this.$productType,
      danAudio:{}
    };
  },
  onShow() {
    let menuInfo = this.menuInfo
    this.closeStyle = `width:${menuInfo.menuHeight};height:${menuInfo.menuHeight};top:${menuInfo.menuTop};left:${menuInfo.menuBorderRadius};`
  },
  onLoad(e) {
    this.integral = e.integral
    this.getVideoList()
    this.initMp3()
  },
  methods: {
    //音频初始化
    initMp3()
    {
      this.danAudio=uni.createInnerAudioContext()
      this.danAudio.autoplay=true;
      this.danAudio.startTime=0;
    },
    //领取福袋音频
    successMp3()
    {
      this.danAudio.src=this.imageUrl+'/dacu/mp3/5.MP3'
      this.danAudio.onPlay(() => {
        console.log('领取积分');
      });
    },
    //获取视频列表
    async getVideoList() {
      console.log('getVideoList', getVideoList)
      let data = {productType: this.productType}
      let url = "/tag/bigsales/videoList"
      const res = await this.$javaApiTag.doRequest("post", url, data, 'json', false)
      this.videoList = res.data.data
    },
    //视频播放中
    videoTimeupdate(e) {
      let duration = Math.floor(e.detail.duration);
      let currentTime = Math.floor(e.detail.currentTime);
      this.videoTime = duration - currentTime;
      this.percent = currentTime / duration * 100
    },
    //视频播放中
    videoEnded(e) {
      if (this.videoIndex === 0) {
        //调用pop1中的show方法
        this.receiveIntegral()
        this.$refs.pop1.show();
      } else if (this.videoIndex === 1) {
        this.otherVideo(2)
        this.videoIndex++;
      } else if (this.videoIndex === 2) {
        this.otherVideo(3)
      }
    },
    // 领取大转盘抽奖奖励
    async receiveIntegral() {
      this.danAudio.src=this.imageUrl+'/dacu/mp3/5.MP3'
      this.danAudio.onPlay(() => {
        console.log('积分到账');
      });
      let formData = {productType: this.productType}
      let url = "/tag/bigsales/firstVideoReward"
      const res = await this.$javaApiTag.doRequest("post", url, formData, 'json')
    },
    // 视频观看进度上报
    async otherVideo(videoNum) {
      let formData = {productType: this.productType, videoNum: videoNum}
      let url = "/tag/bigsales/otherVideo"
      const res = await this.$javaApiTag.doRequest("post", url, formData, 'json')
      if (videoNum === 3) {
        this.danAudio.src=this.imageUrl+'/dacu/mp3/4.MP3'
        this.danAudio.onPlay(() => {
          console.log('福袋出现');
        });
        console.log('hahahah')
        this.$refs.pop2.show()
      }
    },
    //领取福袋
    async receiveBag() {
      let formData = {productType: this.productType}
      let url = "/tag/bigsales/receiveBag"
      const res = await this.$javaApiTag.doRequest("post", url, formData, 'json')
    },
    //用户对视频感兴趣播放下一个视频
    confirm() {
      this.videoIndex++;
    },
    //跳转到首页
    colse() {
      //判断是否播放第一个视频并且没有播放完
      if (this.videoIndex === 0 && this.videoTime > 0) {
        //弹框提示
        uni.showModal({
          title: '提示',
          content: '还未观看完视频 是否放弃领取奖励',
          cancelText: '否',
          confirmText: '是',
          success: (res) => {
            if (res.confirm) {
              uni.switchTab({url: '/pages/sindex/index'})
            }
          }
        })
      } else {
        uni.switchTab({url: '/pages/sindex/index'})
      }
    }
  }
}
</script>

<style lang="scss">
page {
  width: 100%;
  height: 100%;
}

.container {
  width: 100%;
  height: 100%;
  background-color: #000;
  box-sizing: border-box;
  padding-bottom: env(safe-area-inset-bottom);
}

.close {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-list {
  width: 100%;
  height: 100%;
  background-color: #fff;
  position: relative;
}

.yuan {
  position: absolute;
  top: 8upx;
  right: 9upx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

.yuan-box {
  display: flex;
  justify-content: center;
  position: relative;
}

.videoTime {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 38upx;
  color: #fff;
  font-weight: 600;
}

.yuan-msg {
  font-size: 26upx;
  color: #fff;
  margin-top: 10upx;
}

.video-item {
  width: 100%;
  height: 100%;
}

.video {
  width: 100%;
  height: 100%;
}
</style>
